<template>
    <div>
        <el-row class="section">
            <el-col class="offset">
                <el-form :inline="true">
                    <el-col :span="8">
                        <el-form-item label="老人名称">
                            <el-input v-model="orderParam.name" placeholder="请输入" style="width: 200px;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="责任护士">
                            <el-select v-model="orderParam.nurseId" placeholder="请选择">
                                <el-option v-for="employee in employeeData" :key="employee.id" :label="employee.name"
                                    :value="employee.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="护工">
                            <el-select v-model="orderParam.porterId" placeholder="请选择">
                                <el-option v-for="caregivers in caregiversData" :key="caregivers.id"
                                    :label="caregivers.name" :value="caregivers.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col><br>
                    <el-col :span="8">
                        <el-form-item label="区域">
                            <el-select v-model="orderParam.areaId" placeholder="请选择" @change="updateRooms">
                                <el-option v-for="area in areaData" :key="area.id" :label="area.name" :value="area.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="房间">
                            <el-select v-model="orderParam.roomId" placeholder="请选择" @change="updateBeds">
                                <el-option v-for="room in roomData" :key="room.id" :label="room.roomnum"
                                    :value="room.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="床位号">
                            <el-select v-model="orderParam.bedId" placeholder="请选择">
                                <el-option v-for="bed in bedData" :key="bed.id" :label="bed.number" :value="bed.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col><br>
                    <el-col :span="8">
                        <el-form-item label="护理级别">
                            <el-select v-model="orderParam.nursingId" placeholder="请选择">
                                <el-option v-for="nursingLevel in nursingLevelDate" :key="nursingLevel.id"
                                    :label="nursingLevel.name" :value="nursingLevel.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14" class="align-right">
                        <el-form :inline="true">
                            <el-button type="primary" @click="queryUserInfo">搜索</el-button>
                            <el-button @click="clear">重置</el-button>
                        </el-form>
                    </el-col>
                </el-form>
            </el-col>
        </el-row>
        <el-row class="section">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="number" label="床号" width="80">
                </el-table-column>
                <el-table-column prop="name" label="老人姓名" width="80">
                </el-table-column>
                <el-table-column prop="gender" label="性别" width="80">
                    <div v-if="this.user.gender === 1" style="font-size:15px;">男</div>
                    <div v-else>女</div>
                </el-table-column>
                <el-table-column prop="age" label="年龄" width="80">
                </el-table-column>
                <el-table-column prop="areaNum" label="住院区域" width="150">
                </el-table-column>
                <el-table-column prop="roomnum" label="房间" width="100">
                </el-table-column>
                <el-table-column prop="nurseName" label="责任护士">
                </el-table-column>
                <el-table-column prop="porterName" label="护工">
                </el-table-column>
                <el-table-column prop="nursingName" label="护理级别" width="200">
                </el-table-column>
                <el-table-column prop="socialStatus" label="社保类型" width="200">
                    <div v-if="this.user.socialStatus === 0" style="font-size:15px;">职工社保</div>
                    <div v-else>居民社保</div>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="viewReport(scope.row.userNum)">查看报表</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-col class="align-right" style="margin-top:130px">
            <!-- 放分页部分 -->
            <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize" :current-page="pageNum"
                layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
                @size-change="sizeChange" @current-change="currentPage" :total="total"></el-pagination>
        </el-col>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 5,
            total: 0,
            orderParam: {
                name: '',
                nursingId: '',
                nurseId: '',
                areaId: '',
                roomId: '',
                bedId: '',
                porterId: '',
                status: '1'
            },
            nursingLevelDate: [],
            employeeData: [],
            areaData: [],
            roomData: [],
            bedData: [],
            tableData: [],
            caregiversData: [],
            user: {
            }
        }
    },
    methods: {
        clear() {
            this.orderParam = {}
            this.queryUserInfo(); // 重新获取区域数据
            this.roomData = []; // 清空房间数据
            this.bedData = []; // 清空床位数据
        },
        prevPage(val) {
            //点击上一页触发
            this.pageNum = val;
            this.queryUserInfo();
        },
        nextPage(val) {
            //点击下一页触发
            this.pageNum = val;
            this.queryUserInfo();
        },
        sizeChange(val) {
            //val每一页条数
            this.pageNum = 1;
            this.pageSize = val;
            this.queryUserInfo();
        },
        currentPage(val) {
            this.pageNum = val;
            this.queryUserInfo();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryUserInfo();
        },
        queryUserInfo() {
            //带分页参数pageNum,pageSize
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.orderParam;
            this.$axios.post("api/user/queryUser", pageParam).then(res => {
                if (res.data.code == 200) {
                    let pageData = res.data.data;
                    this.tableData = pageData.list;
                    //给分页参数赋值
                    this.total = pageData.total;
                    this.pageNum = pageData.pageNum;
                    this.pageSize = pageData.pageSize;
                } else {
                    this.$router.push({ path: "/login" });
                }
            });
        },
        //查询护理级别
        queryNursingLevel() {
            this.$axios.get('api/dict/queryDict/' + 67)
                .then(res => {
                    if (res.data.code == 200) {
                        this.nursingLevelDate = res.data.data
                    }
                })
        },
        //查所有护士
        queryAllNurse() {
            this.$axios.get('api/nursing/queryAllNurse')
                .then(res => {
                    if (res.data.code == 200) {
                        this.employeeData = res.data.data
                    }
                })
        },
        //查所有护工
        queryAllCaregivers() {
            this.$axios.get('api/nursing/queryAllCaregivers')
                .then(res => {
                    if (res.data.code == 200) {
                        this.caregiversData = res.data.data
                    }
                })
        },
        //查找所有区域
        queryAllArea() {
            this.$axios.get('api/bed/queryAllArea')
                .then(res => {
                    if (res.data.code == 200) {
                        this.areaData = res.data.data
                        if (this.orderParam.areaId) {
                            this.nameOfSelectedArea = this.areaData[0].name
                        }
                    }
                })
        },
        //根据区域id查找房间
        updateRooms() {
            this.orderParam.roomId = "";
            this.orderParam.bedId = "";
            this.$axios.get('api/bed/queryByAreaId/' + this.orderParam.areaId)
                .then(res => {
                    if (res.data.code == 200) {
                        this.roomData = res.data.data
                    }
                })
        },
        updateBeds() {
            this.orderParam.bedId = "";
            this.$axios.get('api/bed/queryBedByRoomId/' + this.orderParam.roomId)
                .then(res => {
                    if (res.data.code == 200) {
                        this.bedData = res.data.data
                    }
                })
        },
        viewReport(userNum) {
            this.$router.push({ path: '/viewReport', query: { userNum: userNum } });
        }
    },
    created() {
        this.queryNursingLevel();
        this.queryAllNurse();
        this.queryAllArea();
        this.queryUserInfo();
        this.queryAllCaregivers();
    },

}
</script>

<style scoped>
.section {
    width: 1350px;
    height: 250px;
    background-color: white;
    margin-left: 50px;
    margin-top: 50px;
}

.section3 {
    width: 300px;
    height: 800px;
    background-color: white;
    margin-top: 10px;
    margin-left: 25px;
}

.section2 {
    width: 1000px;
    height: 800px;
    background-color: white;
    margin-left: 50px;
    margin-top: 10px;
}

.offset {
    margin-top: 25px;
    margin-left: 50px;
}

.offset1 {
    margin-left: 20px;
}

.offset2 {
    margin-left: 100px;
}

.offset3 {
    margin-top: 30px;
    margin-left: 25px;
}

.info {
    display: flex;
    align-items: center;
}

.flex-container {
    display: flex;
    /* 将父级元素设为flex，使其子元素按行排列 */
}

.line {
    width: 3px;
    /* 改变线的宽度 */
    height: 20px;
    /* 改变线的高度 */
    background-color: rgb(0, 174, 255);
    /* 改变线的颜色 */
    margin-right: 8px;
}

.text {
    color: rgb(0, 174, 255);
}

.align-right {
    display: flex;
    justify-content: flex-end;
}


.selected {
    border: 2px solid blue;
}
</style>